<template>
  <div>

    <!-- 弹出框1 -->
    <vol-box :lazy="true"
             :model.sync="model.box1"
             title="弹出框1"
             :height="400"
             :width="700"
             :padding="15">
      <div>弹出框1
        <Button type="info"
                @click="getParent">获取父组件对象</Button>
        <p>通过 this.$emit("parentCall", $vue => {})可以访问父组件ViewGird中的任何属性、对象、方法</p>
        <p>{{model.box1Text}}</p>
      </div>
    </vol-box>

    <!-- 弹出框2 -->
    <vol-box :lazy="true"
             :model.sync="model.box2"
             title="弹出框2"
             :height="400"
             :width="700"
             :padding="15">
      <div>弹出框2
        <el-tabs type="border-card"
                 style="height: 350px;">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
            我的行程
          </el-tab-pane>
          <el-tab-pane :lazy="true"
                       label="消息中心">消息中心</el-tab-pane>
          <el-tab-pane :lazy="true"
                       label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane :lazy="true"
                       label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
    </vol-box>

    <!-- 弹出框3 -->
    <vol-box :lazy="true"
             :model.sync="model.box3"
             title="弹出框3"
             :height="400"
             :width="700"
             :padding="15">
      <div>当前操作的行数据{{JSON.stringify(model.box3Row)}}</div>
      <div slot="footer">
        <Button type="default"
                @click="()=>{this.$Message.error('点击确认')}">确认</Button>
        <Button type="default"
                @click="()=>{model.box3=false}">点击关闭弹出框</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: { "vol-box": VolBox },
  methods: {
  },
  data () {
    return {
      model: {
        box1Text: "",
        box1: false,
        box1Text: "",
        box2: false,
        box3: false,
        box3Row: {}
      }
    }
  },
  methods: {
    getParent () {
      this.$emit("parentCall", $vue => {
        this.model.box1Text = JSON.stringify($vue.buttons);
      })
    },
    getTestData () {
      return "这里是获取到的子组件对象" + JSON.stringify(this.model);
    },
    //弹出框1
    open1 () {
      this.model.box1 = true;
    },
    //弹出框2
    open2 () {
      this.model.box2 = true;
    },
    //弹出框3
    open3 (row) {
      this.model.box3Row = row;
      this.model.box3 = true;
    }
  }
};
</script>